import Vuex from 'vuex'

import defaultState from './state/state'
import mutations from './mutations/mutations'
// 就是组件里面的 computed 定义在应用里可以用的数据
// 避免代码重复编写
import getters from './getters/getters'
import actions from './actions/actions'

const isDev = process.env.NODE_ENV === 'development'

export default () => {
  const store = new Vuex.Store({
    // 规范代码用 正式环境最好不要用
    // 有了这个 修改的时候会出现warning
    // 告诉你这样做不对，但是最后值也改成功了
    strict: isDev,
    state: defaultState,
    mutations,
    getters,
    actions,
    // 方法就是 plugin
    // 在初始化的时候就调用了
    // plugins: [
    //   (store) => {
    //     console.log('my plugin invoked')
    //   }
    // ],
    modules: {
      a: {
        //如果mutations 非常多 并且有可能是一样的，就用这个参数
        namespaced: true,
        state: {
          text: 1
        },
        mutations: {
          //a模块里的state
          updateText(state, text){
            console.log('a.state', state)
            state.text = text
          }
        },
        getters: {
          //第二个参数是 getter 方法
          //第三个参数是 全局参数 也可以看到其他namespace的值，
          // rootState 可以取到全局的值
          textPlus (state, getters , rootState) {
            return state.text + rootState.b.text
          }
        }, actions: {
          //updateText在a模块去找
          add ({state, commit, rootState}) {
            //commit('updateText', rootState.count)

            //root: true 代表是全局的, 在内部调全局的 mutations
            commit('updateCount', {num: 56789}, {root: true})
          }
        }
      },
      b: {
        namespaced: true,
        state: {
          text: 2
        },
        actions: {
          testAction ({commit}) {
            //不用 b/testAction 因为有root: true
            // 调用a模块中的 updateText传入 test text值
            commit('a/updateText', 'test text', {root: true})
            // commit('a/updateText', 'test text')
          }
        }
      }
    }
  })

  // webpack 热更替功能
  // 修改 getters 或者 其他，以后不需要刷新页面
  // 每次创建一个store
  if (module.hot) {
    module.hot.accept([
      './state/state',
      './mutations/mutations',
      './getters/getters',
      './actions/actions'
    ], () => {
      const newState = require('./state/state').default
      const newMutations = require('./mutations/mutations').default
      const newGetters = require('./getters/getters').default
      const newActions = require('./actions/actions').default

      store.hotUpdate({
        state: newState,
        mutations: newMutations,
        actions: newActions,
        getters: newGetters,
      })
    })
  }
  return store;
}
